import { getExtension } from '@/utils/document-util';
import SvgIcon from '../svg-icon';

  // import { useFetchDocumentThumbnailsByIds } from '@/hooks/document-hooks';
  // import { useEffect } from 'react';
import styles from './index.less';

interface IProps {
  name: string;
  id: string;
  img?: string;
  url?: string;
}

const FileIcon = ({ name, id, img, url }: IProps) => {
  const fileExtension = getExtension(name);

  // const { data: fileThumbnails, setDocumentIds } =
  //   useFetchDocumentThumbnailsByIds();
  // const fileThumbnail = fileThumbnails[id];

  // useEffect(() => {
  //   if (id) {
  //     setDocumentIds([id]);
  //   }
  // }, [id, setDocumentIds]);

  return img ? (
    <img src={img} className={styles.thumbnailImg} loading="lazy"></img>
  ) : (
    <SvgIcon name={`file-icon/${fileExtension}`} width={24}></SvgIcon>
  );
};

export default FileIcon;
